<template>
  <div class="custom-modal-mask">
    <div class="custom-modal-container">
      <div class="settings-close-btn" @click="emit('close')">
        <svg viewBox="0 0 24 24" width="24" height="24"><path d="M18 6L6 18M6 6l12 12" stroke="#bbb" stroke-width="2" stroke-linecap="round"/></svg>
      </div>
      <div class="settings-title">设置</div>
      <div class="settings-card">
        <!-- 更换头像 -->
        <div class="settings-row">
          <span class="settings-label">更换头像</span>
          <span class="settings-value settings-avatar-value">
            <span class="settings-avatar" :style="{ background: userInfo.avatarColor || '#ff6fc5' }" @click="showColorDialog = true">
              <svg viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="8" r="4" fill="#fff"/><rect x="6" y="16" width="12" height="4" rx="2" fill="#fff"/></svg>
            </span>
          </span>
        </div>
        <div class="settings-divider"></div>
        <!-- 手机号 -->
        <div class="settings-row">
          <span class="settings-label">手机号</span>
          <span class="settings-value">{{ userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</span>
        </div>
        <div class="settings-divider"></div>
        <!-- 昵称 -->
        <div class="settings-row">
          <span class="settings-label">昵称</span>
          <span class="settings-value">
            <template v-if="!editUsername">
              <span @click="editUsername = true" style="cursor:pointer;">{{ userInfo.username }}</span>
            </template>
            <template v-else>
              <input v-model="editUsernameValue" class="edit-input" />
              <button class="edit-btn" @click="saveUsername" :disabled="!editUsernameValue">保存</button>
              <button class="edit-btn cancel" @click="cancelEdit">取消</button>
            </template>
          </span>
        </div>
      </div>
      <!-- 头像颜色选择弹窗 -->
      <div v-if="showColorDialog" class="color-dialog-mask">
        <div class="color-dialog">
          <div class="color-dialog-title">选择头像颜色</div>
          <div class="color-list">
            <div v-for="color in avatarColors" :key="color" :style="{
              background: color,
              border: selectedColor===color ? '3px solid #409eff' : '2px solid #eee'
            }" class="color-item" @click="selectColor(color)"></div>
          </div>
          <div class="color-dialog-footer">
            <button class="edit-btn cancel" @click="showColorDialog = false">取消</button>
            <button class="edit-btn" :disabled="!selectedColor" @click="saveColor">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
const emit = defineEmits(["close"]);
const userStore = useUserStore()
const userInfo = userStore.userInfo
const editUsername = ref(false)
const editUsernameValue = ref(userInfo.username)

// 头像颜色选择相关
const showColorDialog = ref(false)
const avatarColors = [
  '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#1abc9c', '#9b59b6', '#e67e22', '#e84393', '#ff6fc5', '#00b894'
]
const selectedColor = ref(userInfo.avatarColor || avatarColors[0])
const selectColor = (color) => {
  selectedColor.value = color
}
const saveColor = () => {
  localStorage.setItem('avatarColor', selectedColor.value)
  userInfo.avatarColor = selectedColor.value
  userStore.setUserInfo(userInfo)
  ElMessage.success('头像颜色已更新')
  showColorDialog.value = false
}

onMounted(() => {
  const localColor = localStorage.getItem('avatarColor')
  if (localColor) {
    userInfo.avatarColor = localColor
    userStore.setUserInfo(userInfo)
    selectedColor.value = localColor
  }
})

const saveUsername = async () => {
  try {
    const res = await request.post('/api/user/updateUsername', {
      userId: userInfo.id,
      username: editUsernameValue.value
    })
    if (res.code === 200) {
      userInfo.username = editUsernameValue.value
      userStore.setUserInfo(userInfo)
      editUsername.value = false
      ElMessage.success('昵称已修改')
    } else {
      ElMessage.error(res.message || '修改失败')
    }
  } catch (e) {
    ElMessage.error('修改失败')
  }
}
const cancelEdit = () => {
  editUsernameValue.value = userInfo.username
  editUsername.value = false
}
</script>

<style scoped>
.custom-modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.08);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-modal-container {
  background: #fff;
  border-radius: 12px;
  width: 480px;
  min-width: 480px;
  max-width: 480px;
  min-height: 320px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 32px 0;
  position: relative;
}
.settings-close-btn {
  position: absolute;
  top: 18px;
  right: 24px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.2s;
  padding: 4px;
}
.settings-close-btn:hover {
  background: #f2f2f2;
}
.settings-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #111;
  margin-bottom: 32px;
  letter-spacing: 2px;
}
.settings-card {
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  padding: 32px 36px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.settings-label {
  color: #888;
  font-size: 20px;
  width: 100px;
  flex-shrink: 0;
  text-align: left;
}
.settings-value {
  color: #888;
  font-size: 20px;
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
}
.settings-avatar-value {
  justify-content: flex-end;
}
.settings-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6fc5;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  transition: box-shadow 0.2s;
}
.settings-avatar:hover {
  box-shadow: 0 4px 16px rgba(255,111,197,0.18);
}
.settings-divider {
  height: 1px;
  background: #f2f2f2;
  margin: 0 0 0 0;
}
.edit-input {
  width: 120px;
  font-size: 18px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 4px 8px;
  margin-right: 8px;
}
.edit-btn {
  background: #21ba45;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  margin-left: 2px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.edit-btn:disabled {
  background: #b2dfb2;
  cursor: not-allowed;
}
.edit-btn.cancel {
  background: #eee;
  color: #888;
}
/* 头像颜色选择弹窗样式 */
.color-dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-dialog {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  padding: 28px 32px 18px 32px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.color-dialog-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 18px;
}
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 18px;
}
.color-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: border-box;
  transition: border 0.2s;
}
.color-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}
</style>
